<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>996px grid system | 16 columns ~ margin: 20px &mdash; based on golden grid system</title>
<meta name="keywords" content="996px grid system, golden grid system, golden grid, grid system generator, variable grid system, custom grid system, css framework, generator, xhtml, css, golden grid generator, golden grid system generator, web development workflow, web development cycle" />
<meta name="description" content="The 996px grid system | 16 columns ~ margin: 20px &mdash; is a valid css / xhtml framework for rapid prototyping, development and production environments (based on the golden grid system)." />
<meta name="author" content="GridSystemGenerator.com - v1.02" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/996_16_20.css" />
<style type="text/css" media="all">
body {
	background: #efefef;
	color: #333;
	font-size: 11px;
	padding: 20px 0 40px;
}
a {
	color: #333;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
.main h1 {
	font-family: Georgia, serif;
	font-weight: normal;
	text-align: center;
}
.main h2 {
	padding: 20px 0 0;
	font-family: Georgia, serif;
	font-weight: normal;
	text-align: center;
}
.main p {
	border: 1px solid #666;
	overflow: hidden;
	padding: 10px 0;
	text-align: center;
	font-size: 80%;
}
.main {
	background-color:#FFFFFF;
	background-image: url(images/996_16_20.png);
	background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="main">
  <h1><a href="http://www.gridsystemgenerator.com/gs02.php?GridWidth=996&amp;GridColumns=16&amp;GridMarginLeft=20">996px valid css/xhtml Golden grid system</a></h1>
  <h2>16 columns ~ margin: 20px</h2>
    <div class="g976"><p>956px</p></div>
    <!-- end .grid_16 -->
    <div class="clear">&nbsp;</div>
  <div class="g61">
    <p>41px</p>
  </div>
  <!-- end .g61 -->
  <div class="g915">
    <p>895px</p>
  </div>
  <!-- end .g915 -->
  <div class="clear">&nbsp;</div>
  <div class="g122">
    <p>102px</p>
  </div>
  <!-- end .g122 -->
  <div class="g854">
    <p>834px</p>
  </div>
  <!-- end .g854 -->
  <div class="clear">&nbsp;</div>
  <div class="g183">
    <p>163px</p>
  </div>
  <!-- end .g183 -->
  <div class="g793">
    <p>773px</p>
  </div>
  <!-- end .g793 -->
  <div class="clear">&nbsp;</div>
  <div class="g244">
    <p>224px</p>
  </div>
  <!-- end .g244 -->
  <div class="g732">
    <p>712px</p>
  </div>
  <!-- end .g732 -->
  <div class="clear">&nbsp;</div>
  <div class="g305">
    <p>285px</p>
  </div>
  <!-- end .g305 -->
  <div class="g671">
    <p>651px</p>
  </div>
  <!-- end .g671 -->
  <div class="clear">&nbsp;</div>
  <div class="g366">
    <p>346px</p>
  </div>
  <!-- end .g366 -->
  <div class="g610">
    <p>590px</p>
  </div>
  <!-- end .g610 -->
  <div class="clear">&nbsp;</div>
  <div class="g427">
    <p>407px</p>
  </div>
  <!-- end .g427 -->
  <div class="g549">
    <p>529px</p>
  </div>
  <!-- end .g549 -->
  <div class="clear">&nbsp;</div>
  <div class="g488">
    <p>468px</p>
  </div>
  <!-- end .g488 -->
  <div class="g488">
    <p>468px</p>
  </div>
  <!-- end .g488 -->
  <div class="clear">&nbsp;</div>
  <div class="g549">
    <p>529px</p>
  </div>
  <!-- end .g549 -->
  <div class="g427">
    <p>407px</p>
  </div>
  <!-- end .g427 -->
  <div class="clear">&nbsp;</div>
  <div class="g610">
    <p>590px</p>
  </div>
  <!-- end .g610 -->
  <div class="g366">
    <p>346px</p>
  </div>
  <!-- end .g366 -->
  <div class="clear">&nbsp;</div>
  <div class="g671">
    <p>651px</p>
  </div>
  <!-- end .g671 -->
  <div class="g305">
    <p>285px</p>
  </div>
  <!-- end .g305 -->
  <div class="clear">&nbsp;</div>
  <div class="g732">
    <p>712px</p>
  </div>
  <!-- end .g732 -->
  <div class="g244">
    <p>224px</p>
  </div>
  <!-- end .g244 -->
  <div class="clear">&nbsp;</div>
  <div class="g793">
    <p>773px</p>
  </div>
  <!-- end .g793 -->
  <div class="g183">
    <p>163px</p>
  </div>
  <!-- end .g183 -->
  <div class="clear">&nbsp;</div>
  <div class="g854">
    <p>834px</p>
  </div>
  <!-- end .g854 -->
  <div class="g122">
    <p>102px</p>
  </div>
  <!-- end .g122 -->
  <div class="clear">&nbsp;</div>
  <div class="g915">
    <p>895px</p>
  </div>
  <!-- end .g915 -->
  <div class="g61">
    <p>41px</p>
  </div>
  <!-- end .g61 -->
  <div class="clear">&nbsp;</div>
  <div class="g61">
    <p>41px</p>
  </div>
  <!-- end .g41 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml61">
    <p>41px</p>
  </div>
  <!-- end .g61 ml61 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml122">
    <p>41px</p>
  </div>
  <!-- end .g61 ml122 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml183">
    <p>41px</p>
  </div>
  <!-- end .g61 ml183 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml244">
    <p>41px</p>
  </div>
  <!-- end .g61 ml244 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml305">
    <p>41px</p>
  </div>
  <!-- end .g61 ml305 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml366">
    <p>41px</p>
  </div>
  <!-- end .g61 ml366 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml427">
    <p>41px</p>
  </div>
  <!-- end .g61 ml427 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml488">
    <p>41px</p>
  </div>
  <!-- end .g61 ml488 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml549">
    <p>41px</p>
  </div>
  <!-- end .g61 ml549 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml610">
    <p>41px</p>
  </div>
  <!-- end .g61 ml610 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml671">
    <p>41px</p>
  </div>
  <!-- end .g61 ml671 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml732">
    <p>41px</p>
  </div>
  <!-- end .g61 ml732 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml793">
    <p>41px</p>
  </div>
  <!-- end .g61 ml793 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml854">
    <p>41px</p>
  </div>
  <!-- end .g61 ml854 -->
  <div class="clear">&nbsp;</div>
  <div class="g61 ml915">
    <p>41px</p>
  </div>
  <!-- end .g61 ml915 -->
  <div class="clear">&nbsp;</div>
    <div class="g976"><p>This CSS/XHTML grid system is created by the <a href="http://www.gridsystemgenerator.com">Grid System Generator</a><br />Based on the golden grid system.<br /><a href="http://validator.w3.org/check/referer">XHTML</a> - <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p></div>
    <!-- end .grid_16 -->
    <div class="clear">&nbsp;</div>
</div>
<!-- end .main -->
</body></html>